import React, {useEffect, useState} from "react";
import {createStyles} from "antd-style";
import {Button, Modal} from "antd";
import {getContainerInfo} from "@/api/PhotoApi.ts";
import {useMessageApiStore} from "@/store/BaseStore.ts";
import PhotoContainerSelector from "@/components/public/PhotoContainerSelector.tsx";

const useStyle = createStyles(({css, token}) => {
    return {
        container: css`
            display: flex;
            flex-direction: column;
            position: fixed;
            left: 10px;
            bottom: 10px;
            border: 2px solid ${token.colorPrimaryBorder};
            backdrop-filter: blur(10px);
            button {
                padding: 10px;
                border: none;
                border-bottom: 2px solid ${token.colorPrimaryBorder};
                background-color: transparent;
                font-size: 25px;
                text-shadow: 2px 2px 5px black;
                &:last-child {
                    border-bottom: none;
                }
            }
        `,
        nextBtn: css`
            position: fixed;
            left: 0;
            top: 0;
            width: 100vw;
            height: 100vh;
            z-index: -1;
        `,
    }
})

interface Prop {
    setter: (containerIndex: number, index: number) => void
    containerIndex: number,
    index: number
}

const PhotoController: React.FC<Prop> = ({setter, containerIndex, index}) => {
    const {styles} = useStyle();
    const [showModal, setShowModal] = useState(false)
    // @ts-ignore
    const [containerInfoList, setContainerInfoList] = useState<[{name: string, size: number}]>([])

    const messageApi = useMessageApiStore(state => state.messageApi)

    useEffect(() => {
        getContainerInfo().then((response) => {
            setContainerInfoList(response.data.data)
        })
    }, []);

    const nextImage = () => {
        if (containerIndex != -1) {
            const containerSize = containerInfoList[containerIndex].size;
            if (index + 1 >= containerSize) {
                let ci = containerIndex + 1;
                if (ci >= containerInfoList.length) {
                    ci = 0
                }
                messageApi.info(containerInfoList[ci].name)
                const i = 0
                setter(ci, i)
            } else {
                setter(containerIndex, index + 1)
            }
        } else {
            setter(containerIndex, index)
        }
    }

    const preImage = () => {
        if (containerIndex != -1) {
            if (index - 1 < 0) {
                let ci = containerIndex - 1
                if (ci == -1) {
                    ci = containerInfoList.length - 1
                }
                messageApi.info(containerInfoList[ci].name)
                const i = containerInfoList[ci].size - 1
                setter(ci, i)
            } else {
                setter(containerIndex, index - 1)
            }
        } else {
            setter(containerIndex, index)
        }
    }

    /**
     * 设置容器的索引，同时也要设置图片索引为0
     */
    const setContainerIndex = (containerIndex: number) => {
        setter(containerIndex, 0)
    }

    /**
     * 设置为随机模式
     */
    const setRandom = () => {
        setter(-1, -1)
    }

    return (
        <>
            <div className={styles.nextBtn} onClick={() => {
                nextImage()
            }}></div>
            <div className={styles.container}>
                <button onClick={() => {
                    preImage()
                }}>上一张</button>
                <button onClick={setRandom}>随机</button>
                <button onClick={() => setShowModal(true)}>选择相册</button>
                <button onClick={() => history.back()}>返回</button>
            </div>

            <PhotoContainerSelector props={{showModal,
                setShowModal,
                setPhotoContainerIndex: setContainerIndex,
                photoInfo: containerInfoList}}/>
        </>
    )
}

export default PhotoController;
